<template>
    <div class="poster-main main page-navbar ">
        <mt-header :title="overType" >
        <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
        </mt-header>
         <div class="tabcontainer">
          <section class="finance-list">
               <div class="padding">
                   <div class="flex-col">
                       <div class="trade-name flex-row flex-between">
                           <div class="trade-tab">
                               <div class="title" >{{overInfo.fuser.frealName.substring(0,1)}}</div>
                            <div class="order-name">{{overInfo.fuser.frealName}}</div>
                           </div>
                           <div class="wc">成交{{overInfo.fuser.otcTimes}}单|成交率{{overInfo.fuser.otcSuccessRate?overInfo.fuser.otcSuccessRate:"100%"}}</div>
                       </div>
                       <div class="trade-limit flex-row flex-between">
                           <div>限额：{{overInfo.minAmount}}-{{overInfo.maxAmount}} USDT</div>
                           <div class="limit">{{overInfo.price}} CNY</div>
                       </div>
                       <div class="trade-number">数量：{{overInfo.amount- overInfo.successAmount - overInfo.frozenAmount}} USDT</div>
                       <div class="trade-type flex-row flex-between">
                           <div class="img" >
                            <img v-if="payWay2==2" src="../../assets/weixin.png">
                        <img v-if="payWay1==1" src="../../assets/shape.png">
                        <img v-if="payWay3==0"  src="../../assets/bank.png">
                           </div>
                       </div>
                   </div>
               </div>
            </section>
            <section class="order-list">
               <div class="padding">
                   <div class="flex-left flex-all-center">
                         <img src="../../assets/change.png">
                   </div>
                   <div class="flex-right ">
                       <div class="max-order flex-center flex-between">
                           <input  type="number" placeholder="请输入价格"  v-model="maxBuy" id="maxBuy" @input="maxBuyBtn()">
                           <!-- <span class="black">USDP</span> -->
                       </div>
                       <div class="order-border"></div>
                       <div  class="max-order flex-center flex-between">
                            <input type="number" placeholder="请输入数量"  v-model="maxAmount" @input="maxAmountBtn()">
                           <span class="black" v-if="overState==0"><span style="margin-right:15px">CNY</span>  | <b class="b" v-on:click="buy()" style="margin-left:15px">全部买入</b> </span>
                           <span class="black" v-if="overState==1"><span style="margin-right:15px">CNY</span>  | <b class="b" v-on:click="buy()" style="margin-left:15px">全部卖出</b> </span>
                       </div>
                   </div>
               </div>
            </section>
            <section class="btn flex-all-center">
                 <div to="over" class="cancel-button" @click="handleClose()">取消</div>
                  <div to="over" class="sure-button" v-on:click="overBtn()">下单</div>
            </section>
            <p class="note">备注：{{overInfo.otcRemarks}}</p>
  </div>
    </div>
</template>
<script>
import {setStore, getStore} from '../../components/util/mUtils';
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
  name: 'poster',
  data () {
    return {
          sendVal: false,
      overInfo:'',
      maxBuy:'',
      maxAmount:'',
      okerRatePrice:'',
       payWay1:null,
      payWay2:null,
      payWay3:null,
      overType:'',
      overState:'',
      maxAmountWatch:true,
      maxBuyWatch:true
    }
  },
  mounted() {
      if(this.$route.query.type==0){
        this.overType="购买"+'USDT';
        this.overState=0;
        localStorage.setItem("overType",0);
      }else  if(this.$route.query.type==1){
        this.overType="卖出"+'USDT';
        this.overState=1;
        localStorage.setItem("overType",1);
      }
      this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
  },
  created() {
      this.overInfo=JSON.parse(getStore("order_list"));
          let arr=this.overInfo.payWay.split(",");
                         for (let i = 0; i < arr.length; i++) {
                             if(arr[i]==0){
                                 this.payWay3=arr[i]
                             }else if(arr[i]==2){
                                 this.payWay2=arr[i]
                             }else if(arr[i]==1){
                                 this.payWay1=arr[i]
                             }
                         }
  },
        methods:{
            maxBuyBtn(){
                  this.maxBuy=this.maxBuy.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                this.maxAmount= (this.maxBuy*this.overInfo.price).toFixed(2);
            },
            maxAmountBtn(){
                 this.maxAmount=this.maxAmount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                 this.maxBuy= ( this.maxAmount/this.overInfo.price).toFixed(2);
            },
            openMask(index){
            this.sendVal = true;
        },
            overBtn(){
                let safeWord;
                if(this.maxBuy<this.overInfo.minAmount){
                    Toast({
                    message: '最小买入不能低于'+this.overInfo.minAmount+'USDT',
                    duration: 2000
                    });
                    return;
                }
                if(this.maxAmount==''||this.maxBuy==''){
                Toast({
                    message: '最大可买不能为空',
                    duration: 2000
                    });
                    return;
                }
                   if(this.maxBuy>this.overInfo.maxAmount){
                    Toast("交易数量不能超出限额范围");
                    return ;
                }
                  if  (this.overInfo.type == 0) {
                    MessageBox({
                    inputType: "password"
                    });
                      MessageBox.prompt("请输入资金密码","number").then(({ value, action }) => {
                   safeWord=value;
                   this.dealOtc(safeWord);
                   return;
                    });
                        }else if(this.overInfo.type == 1){
                            safeWord="";
                            this.dealOtc(safeWord);
                    }
            },
            dealOtc(safeWord){
                let type;
                  if(this.overInfo.type==0){
                    type=1;
               }else{
                    type=0;
               }
             
                let params = {
                     amount: this.maxBuy,
                     id: this.overInfo.id,
                     safeWord: safeWord,
                     payWay: this.overInfo.payWay,
                     type:type
                 };
                 this.$http.post("/v1/account/dealOtc", params,).then(res=>{
                     console.log(res)
                     let data=res.data;
                     if (data.code == 200) {
                         this.$router.push({
                     path: `/detail?id=${res.data.data.id}`+'&stat=0',
                        });
                         return;
                     } else if (data.code == 2) {
                           Toast("您未设置资金安全密码");
                           return;
                     } else if (data.code == 3) {
                         Toast("您的资金安全密码错误");
                          return;
                     } else if (data.code == 4) {
                        //  error_win("该订单已被取消");
                        Toast("该订单已被取消");
                         return;
                     } else if (data.code == -100) {
                        //  error_win("请先进行高级身份认证");
                        Toast("请先进行高级身份认证");
                         return;
                     }else if (data.code == 5) {
                        //  error_win("该挂单剩余可交易数量为：" + data.data);
                        Toast("该挂单剩余可交易数量为"+"：" + data.data);
                         return;
                     } else if (data.code == 7) {
                        Toast("余额不足");
                         return;
                     } else if (data.code == 8) {
                        //  error_win("不能和自己交易");
                        Toast("不能和自己交易");
                         return;
                     } else if (data.code == 12) {
                        //  confirm_win("您未绑定银行卡支付方式，去绑定？", function () {
                        //     confirm_win(lang.otc.errorTip6, function () {
                        //      location.href = "/account/c2c-set";
                        //  });
                           Toast("您未绑定银行卡支付方式");
                         return;
                     } else if (data.code == 13) {
                        //  confirm_win("您未绑定支付宝支付方式，去绑定？", function () {
                        //     confirm_win(lang.otc.errorTip7, function () {
                        //      location.href = "/account/c2c-set";
                        //  });
                         Toast("您未绑定支付宝支付方式");
                         return;
                     } else if (data.code == 14) {
                        //  confirm_win("您未绑定微信支付方式，去绑定？", function () {
                        //     confirm_win(lang.otc.errorTip8,function () {
                        //      location.href = "/account/c2c-set";
                        //  });
                          Toast("您未绑定微信支付方式");
                         return;
                     } else{
                         Toast("网络错误");
                     }
                 })
            },
            buy(){
                this.maxBuy=this.overInfo.maxAmount;
                 this.maxAmount=(this.overInfo.maxAmount*this.overInfo.price).toFixed(2);
            },
          handleClose(){
                this.$router.go(-1);
            },
            },
            watch: {
                maxBuy:function (val) {
              
            },
            maxAmount:function (val) {
                 
            }
        },
}
</script>

<style scoped>
.note{
    color: #8686E1;
    text-align: center;
    text-align: left;
    margin-left: 30px
}
.limit{
    font-weight: 500;
    font-size:32px;
}
.people{
    color: #999999;
}
.dialog-footer{
    width: 100%;
   margin-bottom: 20px;
}

.btn{
    padding: 20px 20px 20px 20px;
    margin-top: 80px;
}
.black .b{
    color: #5298F1;
}
.cancel-button{
width:300px;
height:88px;
background:#161736;
border:1px solid #3381FF;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 88px;
color: #3381FF;
margin-right: 60px;
}
.tabcontainer .order-list{
    padding-top: 0px;
}
.sure-button{
    width:300px;
height:88px;
background:#5298F1;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 88px;
color: #fff;
}
.black{
    color: #E0E0F9;
    font-weight: 500;
    font-size: 24px;
}
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: rgba(34, 34, 64, 1);
    color: #fff;
}
.max-order{
    height: 80px;
}
.order-list input{
    outline: none;
    border: 0px solid;
    font-size: 24px;
    width: 60%;
    height: 88px;
    line-height: 1;
    border-radius: 5px;
    border: none;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: #222240;
    color: #8686E1;
}
.tabcontainer{
    height: 100%;
     color: #E0E0F9;
         position: absolute;
    margin-top: 100px;
    width: 100%;
}
.flex-left{
    width: 60px;
    position: relative;
    height: 166px;
}
.flex-right{
    flex: 1;
}
.flex-left img{
    width: 40px;
    height: 40px;
}
.flex-center{
    display: flex;
    align-items: center;
}
.flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-finance  section.finance-tabs {
    height: 108px;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    width: 750px;
    background: #fff;
    z-index: 1;
}

.page-finance  section.finance-tabs button {

    color: #8c9fad;
    position: relative;
    font-size: 32px;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
}
.page-finance{
    background: #161736;
}
.page-finance .page-navbar .finance-tabs  {
    color: #8c9fad;
    position: relative;
    font-size: 32px;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
}
.add{
    position: fixed;
    bottom: 140px;
    right: 40px;
    z-index: 9;
}
.add img{
    width: 100px;
    height: 100px;
}
.tabs .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    top:30px;
}
.page-finance .page-navbar .order-name{
    margin-left: 20px;
    line-height: 40px;
}
.main .buy span {
    text-align: center;
    width: 150px;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
 .tab{
display: flex;
height: 100px;
border:1px solid #e7ebee
}
.active{
    width: 150px;
    color: #3381FF;
    border-bottom:2px solid rgba(51,129,255,1);;
}
.main .buy {
    width: 50%;
    height: 100px;
    line-height: 100px;
}
.button{
    width:143px;
height:50px;
background:#3381FF;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 50px;
color: #fff;
}
.wc{
    font-size: 24px;
    color: #8686E1;
}
    .flex-row{
        display: flex;
        flex-direction: row
    }
    .flex-between{
        justify-content: space-between;
    }
    .log-people{
    height: 70px;
    line-height: 70px;
    margin-right: 10px;
    margin-left: 10px;
}
    .finance-list{
            width: 92%;
            margin: 0 auto;
            height: 240px;
            background: #222240;
            border-radius:8px;
            box-shadow:0px 0px 6px 0px rgba(0,0,0,0.1);
    }
    .order-list{
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        height: 178px;
        background: #222240;
        border-radius:8px;
        box-shadow:0px 0px 6px 0px rgba(0,0,0,0.1);
        box-sizing: border-box;
    }
     section.finance-list .padding{
        margin-top: 20px;
        margin-bottom: 20px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 32px;
        height: 100%;
        box-shadow:0px 3px 16px 0px rgba(14,33,44,0.15);
        border-radius:4px;
        padding-left: 25px;
        padding-right: 25px;
    }
    section.order-list .padding{
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 12px;
        height: 100%;
        box-shadow:0px 3px 16px 0px rgba(14,33,44,0.15);
        border-radius:4px;
        padding-left: 4px;
        padding-right: 25px;
        box-sizing: border-box;
    }
.exchange{
    height: 80px;
    line-height: 80px;
    font-weight:500;
    font-size:32px;
    margin-left: 40px;
    
}
    .flex-col{
        height: 200px;
        flex-direction: column;
        display: flex;
        width: 100%;
    }
    .flex-col>div:nth-child(1){
        
    }
    section.finance-list .trade-name{
        height: 60px;
    }
    .trade-tab{
        width: 30%;
        display: flex;
    }
      section.finance-list .trade-name .title{
        background: #7DAFFF;
        border-radius: 50%;
        width: 40px;
        text-align: center;
        line-height: 40px;
        height: 40px;
    }
    section.finance-list .trade-limit{
        height: 60px;
    }
    section.finance-list .trade-limit>div:nth-child(1){
        font-size: 24px;
    }
    .flex-between{
        justify-content: space-between;
    }
    section.finance-list .trade-type{
        height: 50px;
    }
    section.finance-list .trade-type .img img{
        margin-right: 30px;
    }
      section.finance-list .trade-type .img img:nth-child(3){
        width: 32px;
        height: 32px;
    }
    section.finance-list .trade-number{
        font-size: 24px;
        height: 50px;
    }
    .page-navbar .mint-tab-item{
        font-size: 32px;
    }
input::-webkit-input-placeholder ,textarea::-webkit-input-placeholder{  	/* WebKit browsers */
    color: #8686E1;
}
input:-moz-placeholder,textarea:-moz-placeholder {            	/* Mozilla Firefox 4 to 18 */
    color: #8686E1;
}
input::-moz-placeholder,textarea ::-moz-placeholder{           	/* Mozilla Firefox 19+ */
    color: #8686E1;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {       	/* Internet Explorer 10+ */
    color: #8686E1;
}
    input[type=text]:focus { 
    outline: none;
    border-color: #222240;
    background-color: #222240;
 }
 .flex-right .order-border{
     position: relative;
         height: 2px;
    background: rgba(22,23,54,1);
    left: 20px;
 }
input[type=text]::selection{
    background:transparent;
    background-color: #222240;
}
input[type=text]::-moz-selection{
    background:transparent;
    background-color: #222240;
}

</style>